<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { jumpPage, Toast } from "@/utils";

// 机器编号
let machineNo = ref()
// 机器信息
let machine = ref({})
// 查询到到机器列表
let machineChannelList = ref([])
let isOnline = ref(false);

onLoad((query) => {
	machineNo.value = query.machineNo;
	getMachineNo();
})

const handleQuery = () => {
	if (!machineNo.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入机器编码'
		})
	} else{
		getMachineNo();
	}
}

const getMachineNo = () => {
	request({
		url: `${ApiUrl.MachineUrl}/machineNo/${machineNo.value}`,
		method: 'get',
		data: {}
	}).then(res => {
		if (res.status == 0) {
			machine.value = res.data;
			if (machine.value) {
				getMachineChannelList(machine.value.id);
			} else {
				uni.showToast({
					icon: 'none',
					title: '该机器不存在!'
				})
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	})
}

const getMachineChannelList = (machineId) => {
	request({
		url: `${ApiUrl.MachineChannelUrl}/${machineId}`,
		method: 'get',
		data: {}
	}).then(res => {
		console.log(res)
		if (res.status == 0) {
			if (res.data.length > 0) {
				machineChannelList.value = res.data
			} else {
				uni.showToast({
					icon: 'none',
					title: '该机器暂未创建货道!'
				})
			}
			
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	})
}

// 单个机器检测
const handleDetection = (item) => {
	uni.showLoading({
		title: '检测中'
	})
	request({
		url: `${ApiUrl.MachineChannelUrl}/test?machineNo=${machineNo.value}&channel=${item.channelIndex}`,
		method: 'post',
		data: {}
	}).then(res => {
		console.log(res)
		if (res.status == 0) {
			const timer =  setTimeout(() => {
			  uni.hideLoading()
			  item.status = 2
			}, 2000);
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	})
}

// 检测所有机器
const handleDetectionAll = () => {
	if (!machineNo.value) {
		return uni.showToast({
			icon: 'none',
			title: '请输入机器编码'
		})
	}
	request({
		url: `${ApiUrl.MachineUrl}//online?deviceName=${machineNo.value}`,
		method: 'post',
		data: {}
	}).then(res => {
		console.log(res)
		if (res.status == 0) {
		  if (res.data == 'online') {
		    isOnline.value = true
		  }
			uni.showToast({
				icon: 'success',
				title: '开始检测'
			})
		} else {
		  isOnline.value = false
			uni.showToast({
				icon: 'error',
				title: res.msg
			})
		}
	})
}
</script>

<template>
	<view class="machine_test">
		<view class="machine_query">
			<view class="search">
				<view>机器编号</view>
				<input v-model.trim="machineNo" type="number" disabled placeholder="输入编号" />
			</view>
			<view class="btns">
				<view @click="handleQuery">查询</view>
				<view class="detection_all" @click="handleDetectionAll">检测全部</view>
			</view>
			<view class="select_machine">
				<view>选择机器</view>
				<view></view>
				<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="machine_list">
			<view class="machine_item" v-for="(item, index) in machineChannelList" :key="index">
				<view class="top">
					<view class="machine_no">A{{ item.channelIndex }}</view>
					<image src="/static/image/icon/machine_test.png" mode="aspectFill"></image>
				</view>
				<view class="btn_detection" @click="handleDetection(item)">检测</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.machine_test {
	.machine_query {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9;
		background: #ffffff;
		padding: 0 40rpx;
		box-sizing: border-box;
		.search {
			box-sizing: border-box;
			width: 100%;
			padding: 28rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			display: flex;
			align-items: center;
			view {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				line-height: 33rpx;
			}
			input {
				font-size: 28rpx;
				color: #B6BDBD;
				line-height: 33rpx;
				background: none;
				border: none;
				outline: none;
				border-radius: none;
				margin-left: 28rpx;
			}
		}
		.btns {
			width: 100%;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			view {
				width: 152rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #FF776A;
				font-size: 28rpx;
				color: #FF4638;
				line-height: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&.detection_all {
					background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
					border: none;
					color: #ffffff;
					margin-left: 112rpx;
				}
			}
		}
		.select_machine {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			view {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				line-height: 33rpx;
				&:nth-child(1) {
					
				}
				&:nth-child(2) {
					flex: 1;
				}
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.machine_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 32rpx;
		padding-top: 300rpx;
		.machine_item {
			width: 210rpx;
			height: 290rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
			.top {
				width: 210rpx;
				height: 208rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.machine_no {
					font-weight: 500;
					font-size: 32rpx;
					color: #3B3D3D;
					line-height: 38rpx;
					margin: 6rpx 0;
				}
				image {
					width: 132rpx;
					height: 132rpx;
				}
			}
			.btn_detection {
				width: 152rpx;
				height: 64rpx;
				background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
				border-radius: 32rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>